<script setup>
import CIMCard from '@/components/cim-card/CIMCard.vue'
import { onMounted } from "vue";
import { GRDistance, GRArea } from '@/tools';
onMounted(() => {
  initMap();
});
function initMap() {
  const map = new ol.Map({
    target: 'main-map',
    controls: ol.control.defaults({ attributionOptions: { collapsed: false } })
      .extend([new ol.supermap.control.Logo({ link: "https://iclient.supermap.io" })]),
    view: new ol.View({
      center: [100, 0],
      zoom: 3,
      projection: 'EPSG:4326',
      multiWorld: true
    })
  });

  var layer = new ol.layer.Tile({
    source: new ol.source.TileSuperMapRest({
      url: "https://iserver.supermap.io/iserver/services/map-world/rest/maps/World",
      wrapX: true
    }),
    projection: 'EPSG:4326'
  });
  map.addLayer(layer);
  let temp;
  temp = new GRArea({
    map,
    url: 'https://iserver.supermap.io/iserver/services/map-world/rest/maps/World',
  });
  temp.init();
  temp.onDraw({
    success(v) {
      console.log(v, 'v')
    }
  });
  setTimeout(() => {
    temp.destroy();
    temp = null;
  }, 10000)
}
</script>

<template>
  <CIMCard>
    <template #main>
      <div class="section">
        <div id="main-map"></div>
      </div>
    </template>
  </CIMCard>
</template>

<style scoped lang="less">
.section {
  width: 100%;
  height: 100%;
  border: 1px solid gold;
}

#main-map {
  width: 100%;
  height: 100%;
}
</style>
